<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>




</head>

<body>

<div id="myApp">
    <h3>v-on:用来监听DOM事件 也就是调用方法</h3>
    <button onclick="login()">点击登录</button><br/>
    <button v-on:click="alogin(100,'张三')">点击登录:vue用法</button><br/>
    <button v-on:dblclick="alogin(100,'张三')">点击登录:vue用法-双击事件</button><br/>
    <button v-on:click="blogin(100,'张三')">点击登录:第二种定义方法方式</button><br/>
    <input type="checkbox" v-on:change="myCheckBox"><br/>
    <select v-on:change="mySelect">
        <option value="A">北京</option>
        <option value="B">南京</option>
        <option value="C">福州</option>
    </select>
</div>

</body>

<script>
    function login(){
        alert('login....')
    }
    const app = Vue.createApp({
        data(){
            return{

            }
        },
        methods:{ //定义方法
            alogin(id,userName){
                alert('定义方法第一种方式')
                alert('id='+id)
                alert('userName='+userName)
            },
            blogin:function(id,userName){
                alert('定义方法第二种方式')
                alert('id='+id)
                alert('userName='+userName)
            },
            myCheckBox(){
                console.log('在checkbox上使用方法:onchange')
            },
            mySelect(){
                console.log(event.target.value)
            }
        }
    }).mount('#myApp')
</script>

</html>